import React, { Component } from 'react';
import Head from './Head';
import './testLog.css';
import { PullToRefresh , Toast} from 'antd-mobile';
import {get} from '../../../Lib/Http';
import apiUrl from '../../../Config/web';
import { Accordion, List } from 'antd-mobile';
import { Spin } from 'antd';


class TestLog extends Component {

    constructor(props){
        super(props);

        let height = window.innerHeight - 44 - 15;

        this.state ={
            height:height,
            refreshing: false,
            data: [],
            down: true,
            page:1,
            last:false
        }
    }

    componentDidMount(){

        let that = this;

        get(apiUrl.test_log, {}, function(success){
            if(success.status == 200){
                let data = success.data.data;

                that.setState({
                    data:data,
                    page:2
                });

                return;
            }

            if(success.status == 1007){
                Toast.info('暂无数据');

                this.setState({
                    last:true
                });

                return;
            }

        }, function(error){
            console.log(error);
        })
    }

    toResult(data, id){
        if(data === '404'){
            Toast.info('本条记录没有详情');
            return;
        }

        this.props.history.push('/result/history', {h_data:data, id:id});
    }

    render() {

        if(this.state.data.length === 0){
            console.log(this.state.data.length);
            return (<Spin tip="Loading..." className="home-loding" size="large" />);
        };

        return (
            <div className="root">
                <Head url='/user' history={this.props.history} title='刷题历史' />

                <div style={{'height':this.state.height}} className="test-content-wrapper">
                    <PullToRefresh 
                        damping={10} 
                        style={{height:this.state.height, overflow:'auto'}}
                        indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                        direction='up'
                        refreshing={this.state.refreshing}
                        onRefresh={() => {

                            if(this.state.last === true){
                                Toast.info('没有数据了');
                                return;
                            }

                            this.setState({ refreshing: true });
                            
                            let that = this;

                            let page = that.state.page;

                            get(apiUrl.test_log, {'page':page}, function(success){

                                if(success.data.code === 0){
                                    let data = success.data.data;
                                    let old = that.state.data;
                                    let datas = old.concat(data);

                                    page++;
                                    
                                    that.setState({
                                        page:page,
                                        data:datas,
                                        refreshing:false
                                    })
                                    
                                    return;
                                }

                                if(success.data.code === 1007){

                                    console.log('fuck');

                                    that.setState({
                                        refreshing:false,
                                        last:true
                                    });

                                    Toast.info('没有数据了');

                                    return;
                                }

                            }, function(error){
                                console.log(error);
                            })

                        }}

                    >
                    
                    {this.state.data.map((value, key)=>{
                        return (
                            <div  key={key} style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header={value['created_at']} className="pad">
                                       <div  onClick={(e)=>this.toResult(value['test_detail'], value['project_question_id'])}>
                                        {value['bookName']}&nbsp;&nbsp;{value['projectName']}&nbsp;&nbsp;总共{value['count']}题，做对{value['true_cont']},准确率{value['score']}%
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        {
                                            value['test_detail'] === '404' ? '' : '【查看详情】'
                                        }
                                       </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        )
                    })}

                    </PullToRefresh>    
                </div>
            </div>
        );
    }
}

export default TestLog;